<template>
    <div class="page-container-tab">
        <div class="mb-2 text-center" v-if="initStatus">
            <component-page-org-tree-option v-model="platCode" @change="filterChange" init-first-node :clearable="false" block></component-page-org-tree-option>
        </div>
        <div class="page-container-inner flex-auto">
            <div class="py-12">
                <div v-if="['loading', 'error'].indexOf(dataStatus) >= 0" class="text-center">
                    <component-page-loading :status="dataStatus" @reload="getData"></component-page-loading>
                </div>
                <div v-else>
                    <!--显示-->
                    <div v-if="!dataEditStatus">
                        <div class="text-center" v-if="data.id == null">
                            <component-page-loading status="nodata" nodata-init @create="editData"></component-page-loading>
                        </div>
                        <el-form label-width="180px" class="detail" v-else>
                            <el-form-item :label="$t('game.other.activity.enable')">
                                <el-tag effect="plain" size="mini" :type="!data.enable ? 'danger' : 'success'">
                                    {{ $t(`form.switchList.${data.enable}.label`) }}
                                </el-tag>
                            </el-form-item>
                            <el-form-item :label="$t('game.other.activity.expire_time.title')">
                                <el-tag effect="plain" size="mini" type="info" v-if="data.expire_time == null">
                                    {{ $t('game.other.activity.expire_time.never') }}
                                </el-tag>
                                <component-page-timestamp :timestamp="data.expire_time" v-else></component-page-timestamp>
                            </el-form-item>
                            <!--旋转次数-->
                            <el-form-item :label="$t('game.other.activity.turntable-pay.total')">{{ data.info.total }}</el-form-item>
                            <el-form-item :label="$t('game.other.activity.turntable-pay.free')">{{ data.info.free }}</el-form-item>
                            <!--旋转消耗-->
                            <el-form-item :label="$t('game.other.activity.turntable-pay.bet')">
                                <el-tag effect="plain" size="mini" type="info">
                                    {{ data.info.bet.num }} {{ $t(`game.setting.item.items.${data.info.bet.id}.label`) }}
                                </el-tag>
                            </el-form-item>
                            <!--奖励权重-->
                            <el-form-item :label="$t('game.other.activity.turntable-pay.reward.percent')">{{ data.info.reward.percent }}</el-form-item>
                            <el-form-item :label="$t('game.other.activity.turntable-pay.reward.weight.value')">
                                <div v-if="!data.info.reward.weight.length">----</div>
                                <el-table v-else border :data="data.info.reward.weight" class="leading-normal" style="max-width:500px">
                                    <el-table-column min-width="100" :label="$t('game.other.activity.turntable-pay.reward.weight.weight')" prop="weight"></el-table-column>
                                    <el-table-column min-width="150" :label="$t('game.other.activity.turntable-pay.reward.weight.value')">
                                        <template slot-scope="scope">
                                            <el-tag effect="plain" size="mini" type="info" class="mr-1" v-for="(item,index) in scope.row.value" :key="index">
                                                {{ item[1] }} {{ $t(`game.setting.item.items.${item[0]}.label`) }}
                                            </el-tag>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-form-item>
                            <!--操作-->
                            <el-form-item>
                                <el-button @click="editData">{{ $t('action.edit') }}</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <!--编辑-->
                    <div v-if="dataEditStatus">
                        <el-form label-width="180px" :model="dataCache">
                            <el-form-item :label="$t('game.other.activity.enable')"
                                          :error="Boolean(msg.errors['enable']) ? msg.errors['enable'][0] : ''">
                                <el-switch :inactive-value="0" :active-value="1" v-model="dataCache.enable"></el-switch>
                            </el-form-item>
                            <el-form-item :label="$t('game.other.activity.expire_time.title')"
                                          :error="Boolean(msg.errors['expire_time']) ? msg.errors['expire_time'][0] : ''">
                                <component-page-option-datetime v-model="dataCache.expire_time" type="datetime"></component-page-option-datetime>
                            </el-form-item>
                            <!--旋转次数-->
                            <el-form-item :label="$t('game.other.activity.turntable-pay.total')"
                                          :error="Boolean(msg.errors['info.total']) ? msg.errors['info.total'][0] : ''">
                                <el-input class="w-24" type="number" v-model.number="dataCache.info.total"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('game.other.activity.turntable-pay.free')"
                                          :error="Boolean(msg.errors['info.free']) ? msg.errors['info.free'][0] : ''">
                                <el-input class="w-24" type="number" v-model.number="dataCache.info.free"></el-input>
                            </el-form-item>
                            <!--旋转消耗-->
                            <el-form-item :label="$t('game.other.activity.turntable-pay.bet')"
                                          :error="Boolean(msg.errors['info.bet.id']) ? msg.errors['info.bet.id'][0] : ''
                                                   || Boolean(msg.errors['info.bet.num']) ? msg.errors['info.bet.num'][0] : ''">
                                <el-select class="w-24" v-model="dataCache.info.bet.id">
                                    <el-option v-for="item in $t('game.setting.item.items')" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                                <el-input class="w-32" type="number" :placeholder="$t('game.setting.item.number')" v-model.number="dataCache.info.bet.num"></el-input>
                            </el-form-item>
                            <!--总权重-->
                            <el-form-item :label="$t('game.other.activity.turntable-pay.reward.percent')"
                                          :error="Boolean(msg.errors['info.reward.percent']) ? msg.errors['info.reward.percent'][0] : ''">
                                <el-input class="w-32" type="number" v-model.number="dataCache.info.reward.percent"></el-input>
                            </el-form-item>
                        </el-form>
                        <!--奖励权重-->
                        <el-divider class="mt-10">{{ $t('game.other.activity.turntable-pay.reward.weight.title') }}</el-divider>
                        <el-form label-width="180px" :model="dataCache.info">
                            <div class="divide-y divide-dashed divide-gray-300">
                                <div :class="{'pt-5':index}" v-for="(weight, index) in dataCache.info.reward.weight">
                                    <!--权重-->
                                    <el-form-item :label="$t('game.other.activity.turntable-pay.reward.weight.weight')" required
                                                  :error="Boolean(msg.errors[`info.reward.weight.${index}.weight`]) ? msg.errors[`info.reward.weight.${index}.weight`][0] : ''">
                                        <el-input class="w-24" type="number" v-model.number="dataCache.info.reward.weight[index].weight"></el-input>
                                    </el-form-item>
                                    <!--奖励物品-->
                                    <el-form-item v-for="(item, index1) in weight.value" :key="index1"
                                                  :label="!index1 ? $t('game.other.activity.turntable-pay.reward.weight.title'): ''" required
                                                  :error="Boolean(msg.errors[`info.reward.weight.${index}.value`]) ? msg.errors[`info.reward.weight.${index}.value`][0] : ''
                                                   || Boolean(msg.errors[`info.reward.weight.${index}.value.${index1}.0`]) ? msg.errors[`info.reward.weight.${index}.value.${index1}.0`][0] : ''
                                                   || Boolean(msg.errors[`info.reward.weight.${index}.value.${index1}.1`]) ? msg.errors[`info.reward.weight.${index}.value.${index1}.1`][0] : ''">
                                        <el-select class="w-24" v-model="dataCache.info.reward.weight[index].value[index1][0]">
                                            <el-option v-for="item in $t('game.setting.item.items')" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                        </el-select>
                                        <el-input class="w-32" type="number" :placeholder="$t('game.setting.item.number')"
                                                  v-model.number="dataCache.info.reward.weight[index].value[index1][1]">
                                        </el-input>
                                        <el-button size="small" icon="el-icon-close" circle
                                                   @click="removeItemOrAdd(dataCache.info.reward.weight[index].value, index1, [1,null])">
                                        </el-button>
                                    </el-form-item>
                                    <el-form-item :label="!dataCache.info.reward.weight[index].value.length ? $t('game.other.activity.turntable-pay.reward.weight.title') : ''">
                                        <el-button size="small" @click="addItem(dataCache.info.reward.weight[index].value,[1,null])">{{ $t('action.add') }}</el-button>
                                    </el-form-item>
                                </div>
                            </div>
                            <el-form-item :label="!dataCache.info.reward.weight.length ? $t('game.other.activity.turntable-pay.reward.weight.title') : ''">
                                <el-button type="primary" plain size="small" icon="el-icon-plus" @click="addItem(dataCache.info.reward.weight, rewardWeightItem)">
                                    {{ $t('action.add') }}
                                </el-button>
                                <el-button type="primary" plain size="small" icon="el-icon-close" v-if="dataCache.info.reward.weight.length"
                                           @click="removeItem(dataCache.info.reward.weight, dataCache.info.reward.weight.length - 1)">
                                    {{ $t('action.delete') }}
                                </el-button>
                            </el-form-item>
                        </el-form>
                        <!--操作-->
                        <el-form label-width="180px">
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">{{ $t('action.save') }}</el-button>
                                <el-button @click="dataEditStatus = false">{{ $t('action.cancel') }}</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['activeName'],
    data() {
        return {
            initStatus: false,
            platCode: null,
            dataStatus: 'dle',
            data: {
                enable: 0, // 启用状态
                expire_time: null, // 过期时间
                info: {
                    total: null, // 总次数
                    free: null, // 免费次数
                    bet: { // 旋转消耗
                        id: 1, // 物品ID
                        num: null // 物品数量
                    },
                    reward: { // 奖励
                        percent: null, // 总权重
                        weight: [ // 奖励权重
                            {value: [[1, null]], weight: null},
                        ],
                    }
                }
            },
            dataEditStatus: false,
            dataCache: {},
            dataInit: {},
            msg: {
                code: 200,
                message: '',
                errors: {},
            },
            rewardWeightItem: {
                weight: null, // 权重
                value: [[1, null]], // 奖励物品
            },
        }
    },
    watch: {
        activeName: {
            immediate: true,
            handler(n, o) {
                if (n == 'turntable-pay' && !this.initStatus) {
                    // 标记初始化
                    this.initStatus = true;
                }
            }
        }
    },
    methods: {
        filterChange() {
            // 显示状态
            this.dataEditStatus = false;
            // 获取数据
            this.getData();
        },
        getData() {
            this.dataStatus = 'loading';
            // 获取数据
            axios.get('/game/other/activity/turntable-pay/getConfig', {
                params: {plat_code: this.platCode}
            }).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    if (response.data.resp_data.enable != null) {
                        this.data = response.data.resp_data;
                    }
                    this.dataStatus = 'dle';
                } else {
                    this.dataStatus = 'error';
                }
            })
        },
        initMsg() {
            this.msg.code = 200;
            this.msg.message = '';
            this.msg.errors = {};
        },
        editData() {
            // 重置验证
            this.initMsg();
            // 克隆数据
            this.dataCache = _.cloneDeep(this.data);
            // 平台code
            this.dataCache.plat_code = this.platCode;
            // 编辑状态
            this.dataEditStatus = true;
        },
        addItem(configs, item) {
            configs.push(_.cloneDeep(item));
        },
        removeItem(configs, index) {
            configs.splice(index, 1);
        },
        removeItemOrAdd(configs, index, item) {
            this.removeItem(configs, index);
            if (!configs.length) {
                this.addItem(configs, item);
            }
        },
        onSubmit() {
            this.initMsg();
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/game/other/activity/turntable-pay/update', this.dataCache).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.save')}),
                        showClose: true
                    });
                    this.dataEditStatus = false;
                    // 更新数据
                    this.data = response.data.resp_data;
                } else if (_.includes([42000], response.data.resp_msg.code)) {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                    this.msg = response.data.resp_msg;
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.save')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.header-aside .icon {
    flex-shrink: 0;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    color: $font-color-third;
}

.header-aside .icon:hover {
    color: $font-color-second;
}

::v-deep .container-content {
    padding: 20px;
}

::v-deep .container-content-title {
    margin-bottom: 20px;
    border-bottom: 1px solid $boder-color-third;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: $font-color-first;
}
</style>
